<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页 - Gap中国官网</title>
    <link rel="stylesheet" href="../brand-font/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/header.js"></script>
    <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> -->
    <link rel="stylesheet" href="../css/banner.css">
    <!-- <script>
        window.jQuery || document.write('<script src="../js/jquery-1.11.0.min.js"><\/script>')
    </script> -->
    <script src="../js/banner.js"></script>
    <!-- 底部 -->
    <link rel="stylesheet" href="../css/footer.css">
    <script>
        $(function() {
            $.ajax({
                type: "get",
                url: "../php/getInfo.php",
                dataType: "json",
                success: function(data) {
                    // console.log(data)
                    let temp = '';
                    data.forEach((elm, i) => {
                        let pic = JSON.parse(elm.src);
                        let price = JSON.parse(elm.price);
                        // console.log(price)
                        // console.log(pic[0]['0']);
                        temp += `
                        <a href="../html/goodPage.html?id=${elm.id}" style="color:#333">
                        <div class="slide"><img class="lazy" data-original="${pic[0]['0']}">
                    <div class="title">
                        <p>${elm.title}</p>
                        <span>￥${price[0].now}</span><del>￥${price[0].before}</del>
                    </div>
                </div>
                </a>
                
                    <\script src="../js/jquery.lazyload.min.js"><\/script>
                    <\script type="text/javascript" charset="utf-8">
                    $(function () {
                    $("img.lazy").lazyload({ effect: "fadeIn" });
                    });
                    <\/script>
                        `;
                    });
                    // console.log(temp);
                    $('.slider2').append(temp);
                }
            });
            if (!cookie.get('isLogin')) { //判断是否登录
                $('.reg').on('click', function() {
                    location.href = 'login.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "login.html";
                })
            } else {
                var phoneUser = cookie.get('user');
                var before = phoneUser.slice(0, 3);
                var after = phoneUser.slice(6, -1);
                $('.reg').html(before + '****' + after);
                $('.reg').on('click', function() {
                    location.href = 'userInfo.html';
                })
                $('.slide-login').on('click', function() {
                    location.href = "userInfo.html";
                })
            }

            $('.shopbag').on('click', function() {
                    location.href = 'shopCar.html';
                })
                //用户登录显示号码


        });
    </script>
    <link rel="stylesheet" href="../css/index1.css">

    <link rel="stylesheet" href="../css/index-goods.css">
    <!-- 断点轮播 -->
    <script src="../js/jquery.easing.min.js"></script>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery.bxslider.js"></script>
    <link rel="stylesheet" href="../css/jquery.bxslider.css">
    <script src="../js/slider.js"></script>
</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="inner">
                <ul class="sm-logo">
                    <li class="gap-logo">
                        <a href="#"><i class="iconfont">&#xe6c9;</i></a>
                    </li>
                    <li class="old-logo">
                        <a href="javascript:;"><i class="iconfont">&#xe622;</i></a>

                    </li>
                </ul>
                <strong>
                    全场免运 | 正价商品退换货包邮
                    <a href="javascript:;" style="color: #fff">查看详情</a>
                </strong>
                <div class="service">
                    <span>售后服务热线 400-680-8517</span>
                    <span class="concustomer">
                        <i class="iconfont">&#xe609;</i>
                        <span>在线客服</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="fixed">
            <div class="header-logo">
                <div class="inner">
                    <div class="gap"><a href="javascript:;"><i class="iconfont">&#xe6c9;</i></a>
                        <div class="login">
                            <div class="login-top">
                                <span class="reg"><i class="iconfont">&#xe604;</i>注册/登录</span>
                                <span class="shopbag"><i class="iconfont">&#xe602;</i>我的购物袋</span>
                            </div>
                            <form class="search"><input type="text" placeholder="搜索关键词"><i class="iconfont">&#xe6e8;</i></form>
                        </div>
                        <div class="login-slideUp">
                            <span><i class="iconfont slide-search">&#xe6e8;</i></span><i class="iconfont slide-login">&#xe604;</i><i class="iconfont slide-bag">&#xe602;</i>
                        </div>
                    </div>
                </div>
            </div>
            <section class="nav">
                <div class="inner hei">
                    <ul>
                        <li>
                            <a href="index1.html" style="padding-left: 0;">首页</a>
                        </li>
                        <li>
                            <a href="javascript:;">新品</a>
                            <div class="subnav">
                                <ul>
                                    <li><a href="#">分类索引</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">男装</a></li>
                                    <li><a href="#">女幼</a></li>
                                    <li><a href="#">男幼</a></li>
                                    <li><a href="#">女装</a></li>
                                    <li><a href="#">女婴</a></li>
                                    <li><a href="#">男婴</a></li>
                                    <li><a href="#">GapFit</a></li>
                                    <li><a href="#">Sale</a></li>
                                    <li><a href="#">孕妇装</a></li>
                                </ul>
                                <div>
                                    <a href="#"><img src="../img/img/index/700F0B3AB07A9B9A947939201E5DE44E.jpg" alt=""></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;">女装</a>
                        </li>
                        <li>
                            <a href="javascript:;">男装</a>
                        </li>
                        <li>
                            <a href="javascript:;">女孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">男孩</a>
                        </li>
                        <li>
                            <a href="javascript:;">幼儿（1-5岁)</a>
                        </li>
                        <li>
                            <a href="javascript:;">婴儿（0-24个月)</a>
                        </li>
                        <li>
                            <a href="javascript:;">孕妇装</a>
                        </li>
                        <li>
                            <a href="javascript:;">GapFit</a>
                        </li>
                        <li>
                            <a href="javascript:;" style="padding-right: 0;">Sale</a>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <div class="banner">
        <ul>
        </ul>
        <i class="left iconfont">&#xe601;</i><i class="right iconfont">&#xe600;</i>
    </div>
    <ol>
    </ol>


    <div class="inner">
        <a href="#"><img class="lazy" data-original="../img/img/index/5B53775519BDCEC97BD942E2E3325B23.jpg" alt=""></a>
    </div>
    <div class="sm-ban inner">
        <div class="list">
            <p>限时超值购</p>

            <p>低至49元</p>
            <ul>
                <li>男装</li>
                <li>女装</li>
                <li>男孩</li>
                <li>女孩</li>
                <li>男婴</li>
                <li>女婴</li>
            </ul>
        </div>
        <div class="listPic">
            <div class="slider2">
                <!-- <div class="slide"><img src="../img/img/goods/ban1.jpg">
                    <div class="title">
                        <p>男装|弹力中腰紧身卡其裤</p>
                        <span>￥219.00</span><del>￥399.00</del>
                    </div>
                </div>
                <div class="slide"><img src="../img/img/index/2222.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥299.00</span><del>￥399.00</del>
                    </div>
                </div>
                <div class="slide"><img src="../img/img/index/4444.jpg">
                    <div class="title">
                        <p>男孩|Logo徽标柔软基本款修身长裤</p>
                        <span>￥129</span><del>￥199.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/3333.jpg">
                    <div class="title">
                        <p>幼儿|甜美风格徽标松紧腰休闲裤</p>
                        <span>￥109</span><del>￥199.00</del>
                    </div>
                </div> -->
                <!-- 中间 -->
                <!-- <div class="slide"><img src="../img/img/index/444.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/333.jpeg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/222.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/111.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/4444.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/3333.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/2222.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div>

                <div class="slide"><img src="../img/img/index/1111.jpg">
                    <div class="title">
                        <p>女装|简约纯色徽标束口休闲长裤</p>
                        <span>￥149</span><del>￥299.00</del>
                    </div>
                </div> -->

            </div>

        </div>
        <div class="big-img inner">
            <a href="#"><img class="lazy" data-original="../img/img/index/CE2E65A94AE48FF29DC5B79BB5D01858.jpg" alt=""></a>
            <a href="#"><img class="lazy" data-original="../img/img/index/36B20BF8EFAB9AC3ED460BD66C652EB9.jpg" alt=""></a>
        </div>
    </div>
    <footer class="">
        <div class="inner footer-height">
            <div class="new">
                <p>BE THE FIRST TO KNOW</p>
                <p>第一时间获取Gap最新资讯</p>
            </div>
            <form action="" class="ema">
                <input type="email" name="" id="" placeholder="输入您的电子邮箱地址">
                <i class="iconfont">&#xe696;</i>
            </form>
            <div class="focus">
                <span>关注我们</span>
                <i class="iconfont">&#xe6a5;</i>
                <i class="iconfont">&#xe675;</i>
            </div>
            <div class="online">
                <p><i class="iconfont">&#xe609;</i>在线客服</p>
                <p>服务时间:10:00-22:00</p>
            </div>
        </div>
        <div class="info inner">
            <ul>
                <li>
                    用户支持
                </li>
                <li>
                    <a href="javascript:;">新手上路</a>
                </li>
                <li>
                    <a href="javascript:;">会员服务</a>
                </li>
                <li>
                    <a href="javascript:;">退换货政策</a>
                </li>
                <li>
                    <a href="javascript:;">支付配送</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>

            </ul>
            <ul>
                <li>
                    关于Gap
                </li>
                <li>
                    <a href="javascript:;">联系我们</a>
                </li>
                <li>
                    <a href="javascript:;">隐私条款</a>
                </li>
                <li>
                    <a href="javascript:;">加入我们</a>
                </li>
                <li>
                    <a href="javascript:;">品牌故事</a>
                </li>

            </ul>
            <ul class="websit">
                <li>网站咨询</li>
                <li>
                    <p>订购热线：400-690-5151</p>
                    <p>服务时间:10:00-22:00</p>
                </li>
                <li>
                    <p>售后服务热线: 400-680-8517</p>
                    <p>服务时间:10:00-19:00</p>
                </li>
            </ul>
            <div class="console">
                <div>
                    <p>门店查询</p>
                    <img class="lazy" data-original="../img/img/index/FOOTER_store.06dde1c909439e219a92dd4dc27f63b4.jpg" alt="" srcset="">
                </div>
                <h6><a href="javascript">立即查询</a></h6>
                <div>
                    <span>门店售后电话：021-60934300</span>
                </div>
            </div>
            <div class="find-card">
                <div class="find">
                    <p>Gap企业服务/团购</p>
                    <h6><a href="javascript">立即查询</a></h6>
                </div>
                <div class="card">
                    <p>Gap礼品卡购买/激活</p>
                    <img class="lazy" data-original="../img/img/index/gift-card@2x.f1200d8e0f844dc203595f91531e6fa9.png" alt="">
                </div>
            </div>
            <div class="download">
                <p>下载Gap APP</p>
                <img class="lazy" data-original="../img/img/index/qrcode@2x.10ee7de6775e788bf18eac477241d932.png" alt="">
            </div>
        </div>
        <div class="foot-script inner">
            <p>Gap全球站点： United States|Canada|Japan|Europe</p>
            <p>沪ICP备10200002号|沪公网备31010602000818|上海工商</p>
            <p>浏览该网站表示您接收并同意我们使用cookies为您提供个性化的浏览体验。如需更改管理，请点击 <a href="javascript:;">隐私条款</a>&nbsp; 了解详情</p>
            <p>© 2019 Gap Inc.</p>
        </div>
    </footer>
    <div class="returnTop"><a class="iconfont" href="#">&#xe643;</a></div>
</body>

</html>